<template>
  <div
    style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center"
  >
    <el-switch
      v-model="switchValue"
      :size="componentProps.size"
      :disabled="componentProps.disabled"
      :loading="componentProps.loading"
      :width="componentProps.width"
      :inline-prompt="componentProps.inlinePrompt"
      :active-text="componentProps.activeText"
      :inactive-text="componentProps.inactiveText"
      :active-value="componentProps.activeValue"
      :inactive-value="componentProps.inactiveValue"
      :active-color="componentProps.activeColor"
      :inactive-color="componentProps.inactiveColor"
      @change="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { ElSwitch } from 'element-plus';
import { useAutoDataBinding } from '@/composables/use-data-binding';
import type { IDataBindingConfig } from '@/components/mt-edit/store/types';

const props = defineProps({
  // 数据绑定配置
  dataBinding: {
    type: Object as () => IDataBindingConfig,
    default: () => ({
      enabled: false,
      sourceId: '',
      dataPointId: '',
      targetProperty: 'modelValue',
      transform: 'boolean',
      defaultValue: 'false',
      updateInterval: 0
    })
  },
  modelValue: {
    type: [Boolean, String, Number],
    default: false
  },
  size: {
    type: String as () => 'large' | 'default' | 'small',
    default: 'default'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  width: {
    type: [String, Number],
    default: ''
  },
  inlinePrompt: {
    type: Boolean,
    default: false
  },
  activeText: {
    type: String,
    default: ''
  },
  inactiveText: {
    type: String,
    default: ''
  },
  activeValue: {
    type: [Boolean, String, Number],
    default: true
  },
  inactiveValue: {
    type: [Boolean, String, Number],
    default: false
  },
  activeColor: {
    type: String,
    default: '#409eff'
  },
  inactiveColor: {
    type: String,
    default: '#c0ccda'
  }
});

const emit = defineEmits(['update:modelValue', 'change']);

// 响应式属性对象（用于数据绑定）
const componentProps = ref({
  modelValue: props.modelValue,
  size: props.size,
  disabled: props.disabled,
  loading: props.loading,
  width: props.width,
  inlinePrompt: props.inlinePrompt,
  activeText: props.activeText,
  inactiveText: props.inactiveText,
  activeValue: props.activeValue,
  inactiveValue: props.inactiveValue,
  activeColor: props.activeColor,
  inactiveColor: props.inactiveColor
});

// 使用数据绑定
const shouldUseDataBinding =
  props.dataBinding && props.dataBinding.enabled && props.dataBinding.targetProperty !== 'hide';
const dataBinding = useAutoDataBinding(
  shouldUseDataBinding ? props.dataBinding : null,
  componentProps.value,
  (property: string, value: any) => {
    // 直接更新响应式对象的属性
    if (componentProps.value.hasOwnProperty(property)) {
      (componentProps.value as any)[property] = value;
    }
  }
);

// 监听数据绑定的值变化
watch(
  () => dataBinding.currentValue.value,
  (newValue, oldValue) => {
    // 如果数据绑定启用且有新值，更新组件属性
    if (shouldUseDataBinding && newValue !== undefined) {
      // 确保转换为正确的类型 - Switch组件期望boolean类型
      let convertedValue = newValue;
      if (typeof newValue === 'number') {
        convertedValue = newValue !== 0; // 0转为false，非0转为true
      } else if (typeof newValue === 'string') {
        convertedValue = newValue.toLowerCase() === 'true' || newValue === '1';
      }

      componentProps.value.modelValue = convertedValue;
    }
  },
  { immediate: true }
);

// 监听连接状态变化
watch(
  () => dataBinding.isConnected.value,
  (newValue, oldValue) => {
    // 连接状态变化处理
  },
  { immediate: true }
);

// 监听 dataBinding 配置变化
watch(
  () => props.dataBinding,
  (newConfig, oldConfig) => {
    // dataBinding配置变化处理
  },
  { deep: true }
);

// 监听props变化，同步到响应式属性对象
watch(
  () => props.modelValue,
  (newValue) => {
    if (!shouldUseDataBinding) {
      componentProps.value.modelValue = newValue;
    }
  }
);
watch(
  () => props.size,
  (newValue) => {
    componentProps.value.size = newValue;
  }
);
watch(
  () => props.disabled,
  (newValue) => {
    componentProps.value.disabled = newValue;
  }
);
watch(
  () => props.loading,
  (newValue) => {
    componentProps.value.loading = newValue;
  }
);
watch(
  () => props.width,
  (newValue) => {
    componentProps.value.width = newValue;
  }
);
watch(
  () => props.inlinePrompt,
  (newValue) => {
    componentProps.value.inlinePrompt = newValue;
  }
);
watch(
  () => props.activeText,
  (newValue) => {
    componentProps.value.activeText = newValue;
  }
);
watch(
  () => props.inactiveText,
  (newValue) => {
    componentProps.value.inactiveText = newValue;
  }
);
watch(
  () => props.activeValue,
  (newValue) => {
    componentProps.value.activeValue = newValue;
  }
);
watch(
  () => props.inactiveValue,
  (newValue) => {
    componentProps.value.inactiveValue = newValue;
  }
);
watch(
  () => props.activeColor,
  (newValue) => {
    componentProps.value.activeColor = newValue;
  }
);
watch(
  () => props.inactiveColor,
  (newValue) => {
    componentProps.value.inactiveColor = newValue;
  }
);

// 使用计算属性来获取当前的开关值
const switchValue = computed({
  get: () => {
    let value;

    // 如果数据绑定启用且有值，优先使用数据绑定的值
    if (shouldUseDataBinding && dataBinding.currentValue.value !== undefined) {
      value = dataBinding.currentValue.value;

      // 确保类型转换
      if (typeof value === 'number') {
        value = value !== 0;
      } else if (typeof value === 'string') {
        value = value.toLowerCase() === 'true' || value === '1';
      }
    } else {
      value = componentProps.value.modelValue;
    }

    return value;
  },
  set: (value) => {
    // 更新组件属性
    componentProps.value.modelValue = value;
    // 触发事件
    emit('update:modelValue', value);
    emit('change', value);
  }
});

const handleChange = (value: boolean | string | number) => {
  // 更新计算属性会自动触发所有必要的更新
  switchValue.value = value;
};
</script>
